<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/font-icon.css">
</head>
<body>
<!--导航-->
<nav class="navbar navbar-expand-lg navbar-light nav-color-nav  navbar-lk text-dark">
    <div class="container">
        <a class="navbar-brand xiyuan" href="#"><img src="images/logo2.png" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nabmune" aria-controls="nabmune" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="nabmune">
            <ul class="navbar-nav nav-color ">
                <li class="nav-item active ">
                    <a class="nav-link" href="index.html">首页 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="chat.html">说说</a>
                </li>

                <li class="nav-item dropdown ">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        分类
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="category.html">php</a>
                        <a class="dropdown-item" href="category.html">js</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="category.html">jq</a>
                    </div>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="picture.html">相册</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="life.html">生活</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="chat.html">心得</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="about.html">关于</a>
                </li>


            </ul>
            <!--<form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>-->
        </div>
    </div>
</nav>


<div class="container">
        <div class="row mt-2">
            <div class="col-md-12 bgc">

                <div class="new">
                    <span><i class="el-certificate"></i>推荐图文</span>
                    <small>New Article</small>
                </div>
            </div>

            <div class="col-md-12 mt-4 wow bounceInDown">
                <div class="row">
                    <div class="col-md-3 col-sm-6 ">
                        <div class="card box-shadow  mt-4">
                            <div class="showimg">
                                <img class="card-img-top"  style=" width: 100%; display: block;" src="images/1.png" data-holder-rendered="true">
                            </div>

                            <div class="card-body">
                                <a href="#">测试图文</a>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group showtitle">
                                        <i class="el-time"></i>2019-04-03
                                    </div>
                                    <small class="text-muted"><i class="el-fire"></i>9 mins</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card  box-shadow mt-4">
                            <div class="showimg showtitle">
                                <img class="card-img-top"  style=" width: 100%; display: block;" src="images/2.png" data-holder-rendered="true">
                            </div>
                            <div class="card-body">
                                <a href="#">测试图文</a>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group showtitle">
                                        <i class="el-time"></i>2019-04-03
                                    </div>
                                    <small class="text-muted">9 mins</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card  box-shadow mt-4">
                            <div class="showimg">
                                <img class="card-img-top"  style=" width: 100%; display: block;" src="images/3.png" data-holder-rendered="true">
                            </div>
                            <div class="card-body">
                                <a href="#">测试图文</a>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group showtitle">
                                        <i class="el-time"></i>2019-04-03
                                    </div>
                                    <small class="text-muted">9 mins</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 ">
                        <div class="card  box-shadow mt-4">
                            <div class="showimg">
                                <img class="card-img-top"  style=" width: 100%; display: block;" src="images/1.png" data-holder-rendered="true">
                            </div>
                            <div class="card-body">
                                <a href="#">测试图文</a>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group showtitle">
                                        <i class="el-time"></i>2019-04-03
                                    </div>
                                    <small class="text-muted">9 mins</small>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-6  ">
                        <div class="card box-shadow  mt-4">
                            <div class="showimg">
                                <img class="card-img-top"  style=" width: 100%; display: block;" src="images/4.jpg" data-holder-rendered="true">
                            </div>

                            <div class="card-body">
                                <a href="#">测试图文</a>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group showtitle">
                                        <i class="el-time"></i>2019-04-03
                                    </div>
                                    <small class="text-muted"><i class="el-fire"></i>9 mins</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card  box-shadow mt-4">
                            <div class="showimg showtitle">
                                <img class="card-img-top"  style=" width: 100%; display: block;" src="images/6.jpg" data-holder-rendered="true">
                            </div>
                            <div class="card-body">
                                <a href="#">测试图文</a>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group showtitle">
                                        <i class="el-time"></i>2019-04-03
                                    </div>
                                    <small class="text-muted">9 mins</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card  box-shadow mt-4">
                            <div class="showimg">
                                <img class="card-img-top"  style=" width: 100%; display: block;" src="images/5.jpg" data-holder-rendered="true">
                            </div>
                            <div class="card-body">
                                <a href="#">测试图文</a>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group showtitle">
                                        <i class="el-time"></i>2019-04-03
                                    </div>
                                    <small class="text-muted">9 mins</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 ">
                        <div class="card  box-shadow mt-4">
                            <div class="showimg">
                                <img class="card-img-top"  style=" width: 100%; display: block;" src="images/13.jpg" data-holder-rendered="true">
                            </div>
                            <div class="card-body">
                                <a href="#">测试图文</a>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group showtitle">
                                        <i class="el-time"></i>2019-04-03
                                    </div>
                                    <small class="text-muted">9 mins</small>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>


        </div>
</div>



<!--底部-->
<footer id="footer">
    <div class="container">
        <div class="row footer-row">
            <div class="col-md-6">
                <div class="fooder-title">
                    <h5>说说排行</h5>
                </div>
                <div class="something">
                    <ul class="art-sort">
                        <li>
                            <span>1</span>
                            <a href="#">thinkphp5随机抽取数据的方法
                                <b>(235)</b>
                            </a>
                        </li>
                        <li>
                            <span>2</span>
                            <a href="#">thinkphp5随机抽取数据的方法
                                <b>(235)</b>
                            </a>
                        </li>
                        <li>
                            <span>3</span>
                            <a href="#">thinkphp5随机抽取数据的方法
                                <b>(235)</b>
                            </a>
                        </li>
                        <li>
                            <span>4</span>
                            <a href="#">thinkphp5随机抽取数据的方法
                                <b>(235)</b>
                            </a>
                        </li>
                        <li>
                            <span>5</span>
                            <a href="#">thinkphp5随机抽取数据的方法
                                <b>(235)</b>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-6">
                <div class="fooder-title">
                    <h5>说说排行</h5>
                </div>
                <ul class="list-unstyled footer-list">
                    <li class="media">
                        <div class="footer-img">
                            <img class="mr-3" src="images/7.jpg"  alt="Generic placeholder image">
                        </div>
                        <div class="media-body art-content footer-content">
                            <h5 class="mt-0 mb-1">js前端实现模糊查询</h5>
                            <p>js前端实现模糊查询对于模糊查询，一般都是传关键字给后端</p>
                            <!--<ul>
                                <li><a title="惜缘2019-04-03发表"><i class="el-time"></i>2019-04-03</a></li>
                                <li class="d-none d-sm-none d-md-none d-lg-block"><a href="/index/article/index/id/32.html" title="查看分类"><i class="el-fire"></i>5</a></li>
                            </ul>-->
                        </div>
                    </li>
                    <li class="media">
                        <div class="footer-img">
                            <img class="mr-3" src="images/8.jpg"  alt="Generic placeholder image">
                        </div>
                        <div class="media-body art-content footer-content">
                            <h5 class="mt-0 mb-1">js前端实现模糊查询</h5>
                            <p>js前端实现模糊查询对于模糊查询，一般都是传关键字给后端</p>
                            <!--<ul>
                                <li><a title="惜缘2019-04-03发表"><i class="el-time"></i>2019-04-03</a></li>
                                <li class="d-none d-sm-none d-md-none d-lg-block"><a href="/index/article/index/id/32.html" title="查看分类"><i class="el-fire"></i>5</a></li>
                            </ul>-->
                        </div>
                    </li>
                    <li class="media">
                        <div class="footer-img">
                            <img class="mr-3" src="images/9.jpg"  alt="Generic placeholder image">
                        </div>
                        <div class="media-body art-content footer-content">
                            <h5 class="mt-0 mb-1">js前端实现模糊查询</h5>
                            <p>js前端实现模糊查询对于模糊查询，一般都是传关键字给后端</p>
                            <!--<ul>
                                <li><a title="惜缘2019-04-03发表"><i class="el-time"></i>2019-04-03</a></li>
                                <li class="d-none d-sm-none d-md-none d-lg-block"><a href="/index/article/index/id/32.html" title="查看分类"><i class="el-fire"></i>5</a></li>
                            </ul>-->
                        </div>
                    </li>
                    <li class="media">
                        <div class="footer-img">
                            <img class="mr-3" src="images/10.jpg"  alt="Generic placeholder image">
                        </div>
                        <div class="media-body art-content footer-content">
                            <h5 class="mt-0 mb-1">js前端实现模糊查询</h5>
                            <p>js前端实现模糊查询对于模糊查询，一般都是传关键字给后端</p>
                            <!--<ul>
                                <li><a title="惜缘2019-04-03发表"><i class="el-time"></i>2019-04-03</a></li>
                                <li class="d-none d-sm-none d-md-none d-lg-block"><a href="/index/article/index/id/32.html" title="查看分类"><i class="el-fire"></i>5</a></li>
                            </ul>-->
                        </div>
                    </li>


                </ul>
            </div>
            <!--<div class="col-md-3">dASDsadASDasdASDas</div>
            <div class="col-md-3">dASDsadASDasdASDas</div>-->
        </div>

        <div class="row">

        </div>
    </div>
    <div class="foot-nav text-center">
        <div class="copy-right"><span>Copyright © xxxxxxxx 2018 </span></div>
        <div class="bottom-nav">
            <span>ICP备xxxx号 </span>
        </div>

    </div>

</footer>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="lib/jquery/jquery.js"></script>

<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/wow.js"></script>
<script>
    new WOW().init();//把wow初始化

</script>

</body>
</html>